// 用户管理页面-users.html js文件

// 显示用户列表
$.ajax({
    type: 'get',
    url: '/users',
    success: res => {
        // 渲染用户列表
        let html = template('tpl-showUsers', { data: res });
        $('#userList').html(html);
    }
});

// 头像上传
$('#userFormBox').on('change', '#file', function () {
    imgUpload('#file', '#preview', '#avatar');
});

// 添加用户请求
$('#userFormBox').on('submit', '#addUserForm', function () {
    // 获取表单参数
    let params = $(this).serialize();
    // 向服务器发送添加用户请求
    $.ajax({
        type: 'post',
        url: '/users',
        data: params,
        success: res => {
            // 重新加载页面
            location.reload();
        },
        error: err => {
            let errInfo = JSON.parse(err.responseText);
            alert(errInfo.message);
        }
    });
    // 阻止表单提交
    return false;
});

// 修改用户信息操作
$('#userList').on('click', '.edit-user', function () {
    // 获取编辑用户的id
    let id = $(this).attr('data-id');
    // 根据id查询用户信息
    $.ajax({
        type: 'get',
        url: `/users/${id}`,
        success: res => {
            // 渲染编辑用户表单
            let html = template('tpl-updateUser', { data: res });
            $('#userFormBox').html(html);
        }
    });
});

// 修改用户表单提交事件
$('#userFormBox').on('submit', '#updateUser', function () {
    // 获取修改用户的id
    let id = $(this).attr('data-id');
    // 获取修改用户的参数信息
    let params = $(this).serialize();
    // 向服务器发送更新用户请求
    $.ajax({
        type: 'put',
        url: `/users/${id}`,
        data: params,
        success: res => {
            // 重新加载页面
            location.reload();
        },
        error: err => alert('修改用户信息失败')
    });
    // 阻止表单提交
    return false;
});

// 删除用户信息
$('#userList').on('click', '.delete', function () {
    let id = $(this).attr('data-id');
    // 用户确定删除
    if (confirm('您确定要删除这个用户吗？')) {
        // 向服务器发送删除用户请求
        deleteUser(id);
    }
});

// 用户列表全选与取消全选
$('#selectAll').on('click', function () {
    // 获取全选复选框的选中状态
    let state = $(this).prop('checked');
    // 设置所有复选框的选中状态
    $('.user-checkbox').prop('checked', state);
    // 判断与设置批量删除按钮的显示状态
    judgeDeleteAllDisplay();
});

// 用户列表复选框选中状态改变事件
$('#userList').on('change', '.user-checkbox', function () {
    // 判断与设置批量删除按钮的显示状态
    judgeDeleteAllDisplay();
});

// 批量删除请求
$('#deleteAll').on('click', function () {
    // 查找所有选中状态的用户列表复选框
    let selectArray = $('.user-checkbox').filter((index, item) => $(item).prop('checked') == true);
    // 拼接批量删除id
    let id = '';
    // 若选中状态的用户列表复选框只有一个则把此复选框的data-id赋值给id，否则把所有选中复选框的data-id属性通过-拼接后赋值给id
    if(selectArray.length == 1) id = $(selectArray[0]).attr('data-id');
    else {
        for (let i=0; i<selectArray.length; i++) id = i == 0 ? id + $(selectArray[i]).attr('data-id') : id + '-' + $(selectArray[i]).attr('data-id');
    }
    // 执行批量删除操作
    deleteUser(id);
});

/**
 * 根据id删除用户函数
 * @param { 要删除用户的id，如需删除多个用户需用-连接id，例如：id-id-id } id 
 */
function deleteUser(id) {
    $.ajax({
        type: 'delete',
        url: `/users/${id}`,
        success: res => {
            // 删除成功，重新加载页面
            location.reload();
        },
        error: err => {
            // 删除失败，提示用户
            alert('删除用户失败！');
        }
    });
}

// 判断与设置批量删除按钮的显示状态函数
function judgeDeleteAllDisplay() {
    // 获取所有已选中的复选框
    let checkboxArray = $('.user-checkbox');
    let newCheckboxArray = checkboxArray.filter((index, item) => $(item).prop('checked') == true);
    // 若已选中的复选框数量大于0，则显示批量删除按钮，否则隐藏批量删除按钮
    if (newCheckboxArray.length > 0) $('#deleteAll').show();
    else $('#deleteAll').hide();
    // 若已选中的复选框数目等于所有用户列表复选框的数目则修改全选按钮为选中状态，否则修改其为未选中状态
    if(checkboxArray.length == newCheckboxArray.length) $('#selectAll').prop('checked', true);
    else $('#selectAll').prop('checked', false);
}